<template>
  <div id="playTime">
    <!-- 显示最近七天 -->
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      myChart: "",
    };
  },
  mounted() {
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 188;
        var ratioY = window.innerHeight / 880;

        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  methods: {
    // 绘制图表
    setEcharts() {
      this.myChart = this.$echarts.init(document.getElementById("playTime"));
      let xData = ["1", "2", "3", "4"];
      let yData = [350, 298, 5037, 239];
      let yData1 = [1350, 2918, 537, 2239];
      let option = {
        grid: {
          top: "10%",
          left: "0%",
          bottom: "5%",
          right: "13%",
          containLabel: true,
        },
        tooltip: {
          // trigger: "axis",
          backgroundColor: "#000000",
          // axisPointer: {
          //   type: "cross",
          // },
          textStyle: {
            fontSize: 55, // 字体大小
            color: "#fff",
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
            fontSize: 40,
          },
          right: "1%",
          top: "0%",
        },
        animation: false,
        xAxis: [
          {
            type: "category",
            data: xData,
            name: "单位: 季度",
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: {
              color: "#fff",
              fontSize: 40,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 38,
              },
              margin: 30,
            },
          },
        ],

        yAxis: [
          {
            show: true,
            name: "单位: 个",
            nameGap: 30,
            nameTextStyle: {
              color: "#fff",
              fontSize: 40,
            },
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 40,
              },
            },
            splitLine: {
              show: false, //去掉网格线
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "上月",
            type: "pictorialBar",
            symbolSize: [80, 15],
            symbolOffset: ["-90%", -6],
            symbolPosition: "end",
            z: 12,
            color: "#2DB1EF",
            data: yData,
          },
          {
            name: "上月",
            type: "pictorialBar",
            symbolSize: [80, 15],
            symbolOffset: ["-90%", 7],
            z: 12,
            color: "#2DB1EF",
            data: yData,
          },
          {
            // 底部小圆
            name: "上月",
            type: "pictorialBar",
            symbolSize: [95, 20],
            symbolOffset: ["-75%", 12],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#2EA9E5",
                borderColor: "rgba(65,163,205,1)",

                borderType: "solid",
                borderWidth: 4,
              },
            },
            data: yData,
          },
          {
            // 底部大圆
            name: "上月",
            type: "pictorialBar",
            symbolSize: [120, 25],
            symbolOffset: ["-60%", 16],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#19465D",
                borderColor: "rgba(65,163,205,.3)",
                borderType: "solid",
                borderWidth: 4,
              },
            },
            data: yData,
          },
          {
            name: "上月",
            type: "bar",
            //silent: true,
            barWidth: "80",
            barGap: "20%", // Make series be overlap
            barCateGoryGap: "10%",
            label: {
              normal: {
                show: true,
                position: "top",
                // "formatter": "{c}%"
                fontSize: 40,
                fontWeight: "bold",
                color: "#34DCFF",
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: "#38B2E6",
                    color: "rgba(65,163,205,1)",
                  },
                  {
                    offset: 1,
                    color: "#33CCFF",
                    color: "rgba(65,163,205,.5)",
                    // color:
                  },
                ]),
                opacity: 0.8,
              },
            },
            data: yData,
          },
          {
            // 顶部圆
            name: "本月",
            type: "pictorialBar",
            symbolSize: [80, 15],
            symbolOffset: ["90%", -6], //图形位置  [左右,上下]
            symbolPosition: "end",
            z: 12,
            color: "rgba(184,122,223,1)",
            data: yData1,
          },
          {
            // 底部最小圆
            name: "本月",
            type: "pictorialBar",
            symbolSize: [80, 15],
            symbolOffset: ["90%", 7],
            // "barWidth": "20",
            z: 12,
            color: "rgba(184,122,223,1)",
            data: yData1,
          },
          {
            // 底部小圈
            name: "本月",
            type: "pictorialBar",
            symbolSize: [95, 20],
            symbolOffset: ["75%", 12],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#2EA9E5",
                borderColor: "rgba(184,122,223,1)",

                borderType: "solid",
                borderWidth: 4,
              },
            },
            data: yData1,
          },
          {
            // 底部大圈
            name: "本月",
            type: "pictorialBar",
            symbolSize: [120, 25],
            symbolOffset: ["60%", 16],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#19465D",
                borderColor: "rgba(184,122,223,.5)",

                borderType: "solid",
                borderWidth: 4,
              },
            },
            data: yData1,
          },
          {
            name: "本月",
            type: "bar",
            //silent: true,
            barWidth: "80",
            barGap: "80%", // Make series be overlap
            // barCateGoryGap: '-100%',
            label: {
              normal: {
                show: true,
                position: "top",
                // "formatter": "{c}%"
                fontSize: 40,
                fontWeight: "bold",
                color: "rgba(184,122,223,1)",
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: "rgba(184,122,223,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(184,122,223,.3)",
                  },
                ]),
                opacity: 0.8,
              },
            },
            data: yData1,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioY = window.innerHeight / 880;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
      this.setEcharts();
    },
  },
};
</script>

<style scoped lang="less">
#playTime {
  width: 1712px;
  height: 880px;
  padding: 50px 40px;

  box-sizing: border-box;
  // background: rgba(0, 0, 0, 0.6);
  // background: url(../../assets/方框底图.png) 0 0 no-repeat;
  // background-size:100% 100%;
}
</style>
